<template>
  <div class="yy-page yy-queue-category">
    <div class="yy-page-header">
      <div class="yy-page-header_title">医生终端</div>
      <div class="yy-page-header_action">
        <el-button  @click="getTerminalList()">刷新</el-button>
        <el-button color="#009688" @click="onOpenDialog()">关联终端</el-button>
      </div>
    </div>
    <div class="yy-page-data">
       <WidgetTable ref="terminalTableRef" :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging"></WidgetTable>
    </div>
    <RoomDoctorClient ref="terminalRelation" :room-id="selectedRoom?.id" @saveSuccess="getTerminalList()"/>
  </div>
</template>

<script setup lang="ts">

import {defineProps, reactive, ref, watch} from "vue";
import {TableColumn} from "@/model/Definition";
import {formatDate} from "@/utils/yayi";
import {QueueRoomModel} from "@/model/QueueRoomModel";
import RoomApi from "@/api/queue/RoomApi";
import {DeviceModel, UsedTypeEnum} from "@/model/DeviceModel";
import RoomDoctorClient from "@/views/queue/room/RoomDoctorClient.vue";
import {ElMessage} from "element-plus";
import WidgetTable from "@/components/widget/WidgetTable.vue";

const props = defineProps({
  selectedRoom: {
    type: QueueRoomModel,
    required: true,
    default: null
  }
})

const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: DeviceModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"index",
      "label":"序号",
      "type": "index",
      "showable":true,
      "fixed": 'left',
      "align": 'center',
      "width": 60
    },
    {
      "field":"name",
      "label":"名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"code",
      "label":"代码",
      "showable":true
    },
    {
      "field":"ip",
      "label":"IP",
      "showable":true
    },
    {
      "field":"state",
      "label":"状态",
      "showable":true,
      "sortable":false,
      "align": 'center',
      "fixed": 'right',
      "width": 60,
    },
    {
      "field":"action",
      "label":"操作",
      "width": 85,
      "showable":true,
      "sortable":false,
      "align": 'center',
      "fixed": 'right'
    }
  ],
  paging: {
    isPaging: false
  },
  data: [],
  formats: {
    'state': {
      textType:'text',
      typeFormat: DeviceModel.getStateType,
      labelFormat: DeviceModel.getStateLabel
    },
    'updateTime': {
      labelFormat:  (val) =>formatDate(val)
    },
    'action': {
      items: [
        {label: '移除',elType: 'button', value: 'delete', confirm: {title: '您确定要移除该终端吗？', atConfirm: (data: DeviceModel) => onDeleteCategory(data)}}
      ]
    }
  }
})
const terminalTableRef = ref()
const terminalRelation = ref()

const getTerminalList = () => {
  table.isLoading = true
  RoomApi.listRoomTerminal(props.selectedRoom.id, UsedTypeEnum.DOCTOR_CLIENT).then((data) => {
    table.data = data
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onOpenDialog = (data?: DeviceModel) => {
  terminalRelation.value.onShowModel(data)
}

const onDeleteCategory = (data: DeviceModel) => {
  RoomApi.removeRoomTerminal(props.selectedRoom.id, data.id).then((res) => {
    const index = table.data.findIndex(item => item.id === data.id);
    table.data.splice(index, 1)
    ElMessage.success({
      message: '移除终端设备成功',
      showClose: true
    })
  })
}

const onEditCallback = (data: DeviceModel) => {
  const index = table.data.findIndex(item => item.id === data.id);
  if (index < 0) {
    table.data.unshift(data)
  } else {
    table.data.splice(index, 1, data)
  }
}


watch(() => props.selectedRoom, () => {
  if (props.selectedRoom) {
    getTerminalList()
  }
})
</script>
<style scoped lang="scss">
  .yy-queue-category {}
</style>